<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-02-27 13:53:17
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-03-12 15:26:55
 * @FilePath: /hr_new_vue3/src/views/Management/Human/ChangeManagement/InductionManagement/EntryApplicationSetting/AddSetting/Components/Preview/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 入职邀请页面-手机端 -->
<template>
  <div class="wrap">
    <a-scrollbar
      style="height: calc(100vh - 70px); overflow: auto"
      type="track"
    >
      <h2 class="title">{{ data.title }}</h2>
      <a-form v-if="data.codes" :model="data.codes" autoLabelWidth>
        <a-row :gutter="16">
          <a-col v-for="(ele, index) in data.codes" :key="index" :span="24">
            <FormItem
              :componentType="(ele?.ctlComponentType as string)"
              :props="(ele?.props as any)"
              :name="(ele?.ctlCnName as string)"
              :required="(ele?.isDefault as any)"
              v-model:values="ele.controlValue"
              :code="(ele?.ctlCode as any)"
              :data="ele"
            />
          </a-col>
        </a-row>
      </a-form>
    </a-scrollbar>
    <footer>
      <a-button class="btn" type="primary" @click="submit">提交</a-button>
    </footer>
    <!-- <a-form-item
        hide-label
        v-for="(item, index) in data.codes"
        :key="index"
        :required="item.isDefault"
      >
        <a-input
          :placeholder="`请输入${item.ctlCnName}${
            item.isDefault ? '(必填)' : ''
          }`"
          v-if="item.ctlComponentType === 'TEXT'"
        />
        <a-select
          :placeholder="`请输入${item.ctlCnName}${
            item.isDefault ? '(必选)' : ''
          }`"
          v-else-if="item.ctlComponentType === 'SELECT'"
        />
        <a-input-number
          :placeholder="`请输入${item.ctlCnName}${
            item.isDefault ? '(必填)' : ''
          }`"
          v-else-if="item.ctlComponentType === 'TEXT_NUMBER'"
          hide-button
        />
        <a-input-number
          :placeholder="`请输入${item.ctlCnName}${
            item.isDefault ? '(必填)' : ''
          }`"
          v-else-if="item.ctlComponentType === 'TEXT_AREA'"
        />
        <a-date-picker
          :placeholder="`请输入${item.ctlCnName}${
            item.isDefault ? '(必选)' : ''
          }`"
          v-else-if="item.ctlComponentType === 'DATE'"
        />
        <a-range-picker
          :placeholder="`请输入${item.ctlCnName}${
            item.isDefault ? '(必选)' : ''
          }`"
          v-else-if="item.ctlComponentType === 'DATE_RANGE'"
        />
      </a-form-item> -->
  </div>
</template>

<script lang="ts">
export default {
  async beforeRouteEnter(to: any, from: any, next: any) {
    if (Reflect.ownKeys(to.query).length > 0) {
      let sign, timeStamp;
      sign = (to.query.sign as string) || '';
      timeStamp = +(to.query.timeStamp as string) || 0;
      const isExpired = await CheckApplySign({
        sign,
        timeStamp
      });
      if (isExpired) {
        next();
      } else {
        Message.error('链接已过期！');
      }
    }
  }
};
</script>

<script lang="ts" setup>
import { CheckApplySign } from '@/apis/management/personnel/changeManagement/inductionManagement';
import { GetEntryApplicationSettingDetail } from '@/apis/management/human/humanChange/entry';
import { Message } from '@arco-design/web-vue';
import FormItem from '@/components/DynamicFormsNew/RenderingForm/FormItem/index.vue';

import useControlFormStore from '@/store/controlForm';
const controlFormStore = useControlFormStore();
controlFormStore.fieldNames.labelName = 'ctlCnName';
controlFormStore.fieldNames.componentType = 'ctlComponentType';
controlFormStore.fieldNames.valueName = 'ctlValue';

const route = useRoute();
const id = +route.query.id;
const cId = +route.query.cId;

const data = ref({
  codes: []
});
const getData = async () => {
  try {
    data.value = await GetEntryApplicationSettingDetail({ id, cId });
    data.value.codes = data.value.codes
      .filter((el: any) => el.isShow === 1)
      .sort((a, b) => a.sort - b.sort);
    console.log('====================================');
    console.log(data.value);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

const submit = async () => {
  try {
    //
  } catch (error: unknown) {
    console.log(error);
  }
};
</script>

<style scoped lang="less">
.wrap {
  box-sizing: border-box;
  padding: 20px;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

footer {
  height: 40px;
  width: 100%;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}
</style>
